
// 首页商品scrollview，X轴滚动
<script setup>
const emit = defineEmits(['didClickMore','didClickItem'])
const onMore = ()=>{
  emit('didClickMore')
}
const onItem = (item)=>{
  emit('didClickItem',item)
}
</script>
<template>
  <div class="title">
    <div>- 搭配推荐 -</div>
  </div>
  <div class="content">
    <scroll-view class="scr" scroll-x="true" scroll-y="false" upper-threshold="50" lower-threshold="50" scroll-top="0"
      scroll-left="0" scroll-into-view="" scroll-with-animation="true" enable-back-to-top="false" bindscrolltoupper=""
      bindscrolltolower="" bindscroll="">
      <div class='scr-item' v-for="item in 10" :key="item" @click="onItem(item)">
        <van-image
          width="100"
          height="120"
          fit="cover"
          position="center"
          src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
        />

      </div>
      <div class="more" @click="onMore">
        - 更多 -
      </div>
    </scroll-view>
  </div>
</template>
<style scoped lang="scss">
.scr {
  display: flex;
  flex: 1;
  /* 允许横向滚动，根据内容多少自动显示滚动条 */
  overflow-x: auto;
  white-space: nowrap;
  scrollbar-width: none; /* 隐藏滚动条 */
  margin: 0 0 0 10px;
  .scr-item {
    display: block;
    height: 100%;
    width: 120px;
    padding: 10px;
    margin-right: 10px;
    
  }

  .more{
    font-size: 20px;
    line-height: 80px;
    display: block;
    height: 100%;
    width: 120px;
    padding: 10px;
    margin-right: 10px;
  }
}

// 隐藏scr 滚动条
::-webkit-scrollbar {
  display:none;
  width:0;
  height:0;
  color:transparent;
}

.title {
  display: block;
  height: 40px;
  text-align: center;
  font-size: 18px;
  line-height: 22px;
  color: #333;
}
</style>